<template>
  <div class="bg-white p-3 border rounded-lg">
    <el-form :model="form" :inline="true" label-width="60px">
        <div class="flex flex-row">
            <el-form-item label="楼号" label-position="right" class="mr-2 mb-2 w-1/2">
                <el-select v-model="form.building" placeholder="请选择楼号" class="w-full">
                    <el-option label="1号楼" value="1" />
                    <el-option label="2号楼" value="2" />
                    <el-option label="3号楼" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="楼层" label-position="right" class="mr-0 mb-2 w-1/2">
                <el-select v-model="form.floor" placeholder="请选择楼层" class="w-full">
                    <el-option label="1楼" value="1" />
                    <el-option label="2楼" value="2" />
                    <el-option label="3楼" value="3" />
                </el-select>
            </el-form-item>
        </div>
        <div class="flex flex-row">
            <el-form-item label="姓名" label-position="right" class="mr-2 mb-2 flex-1">
                <el-input v-model="form.name" class="w-full" placeholder="请输入姓名" />
            </el-form-item>
            <el-button type="primary" @click="search" size="default" class="p-2">搜索</el-button>
        </div>
    </el-form>
    <el-table 
        :data="tableData"
        :table-layout="tableLayout"
        border @current-change="handleCurrentChange"
        highlight-current-row
        class="cursor-pointer"
        >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="room" label="房间号" />
        <el-table-column prop="nursing" label="护理等级" />
    </el-table>
    <div class="flex justify-end">
        <el-pagination background layout="prev, pager, next" :total="total" class="mt-4"/>
      </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import {getElderlyList, getElderlyInfo} from '@/api/elderlyApi.js'
const props = defineProps({
    status: {
        type: String,
        default: '1',
    },
});
const status = ref(props.status);
const emit = defineEmits(['handleElderlyCurrentChange']);
const tableData = ref([
    {
        name: '张三',
        room: '夕阳楼/101',
        nursing: '二级护理',
    },
    {
        name: '李四',
        room: '夕阳楼/102',
        nursing: '二级护理',
    },
    {
        name: '王五',
        room: '夕阳楼/103',
        nursing: '二级护理',
    }
]);
const tableLayout = ref('auto');
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const form = ref({
    name: '',
});
//搜索
const search = () => {
    console.log(form.value);
}
//获取当前行老人数据
const handleCurrentChange = (row) => {
    emit('handleElderlyCurrentChange', row);
}
//获取老人列表
const getElderlyListData = () => {
    const params = {
        page: 1,
        pageSize: 10,
        status: status.value,
        name: form.value.name,
        building: form.value.building,
        floor: form.value.floor,
    }
    getElderlyList(params).then(res => {
        console.log(res);
    });
}
</script>

